1

00:00:00,860  -->  00:00:07,620
In previous video, we already learned about
bootstrap. Now, in this video, we are going

2

00:00:07,620  -->  00:00:11,380
to learn about extends.
Okay let’s start.

3

00:00:14,580  -->  00:00:16,420
Here we can see that we

4

00:00:16,420  -->  00:00:26,260
have 3 url, which is hello_world, a, and b.
And each url using different function in views.

5

00:00:26,620  -->  00:00:35,980
If we check in views.py, here we can see three
different function, and each function returning

6

00:00:35,980  -->  00:00:44,600
different template files, which is hello_world.html,
a.html, and b.html.

7

00:00:45,120  -->  00:00:51,900
Now, we have a problem. Let’s say we want
to have a navbar in each page,

8

00:00:52,740  -->  00:01:01,480
so we need to put a navbar script in each template.
Now let’s open the browser, if we open hello_world

9

00:01:01,480  -->  00:01:09,360
page, we will have a navbar. But if we try
to access a page, we don’t have a navbar here

10

00:01:09,520  -->  00:01:16,800
And if we access b page, we also don’t
have a navbar here. Why? Because we just have navbar

11

00:01:16,800  -->  00:01:25,280
script in hello_world.html, we don’t have
navbar script in a.html and b.html.

12

00:01:26,860  -->  00:01:33,940
If we want to have a navbar in all of page,
so we need to add navbar script in each html file.

13

00:01:34,480  -->  00:01:41,640
This is not best practice. Let’s say
in the future, we want to change the navbar menu,

14

00:01:41,780  -->  00:01:49,500
and we already have many html file,
let’s say 10 html file. So we need to edit

15

00:01:49,500  -->  00:01:59,600
10 file to change the navbar menu. That’s
only 10 html file, but how if we have 50 html file?

16

00:01:59,800  -->  00:02:02,780
That’s will be absolutely wasting
time.

17

00:02:03,320  -->  00:02:12,200
To solve this problem, we can create one file
named base.html, and then the others html

18

00:02:12,200  -->  00:02:21,080
will extends to the base.html. We will only
need to put navbar script in the base.html

19

00:02:21,760  -->  00:02:33,620
Let’s start coding! In the templates directory,
create a new file, the name will be base.html.

20

00:02:34,280  -->  00:02:41,000
Now let’s move bootstrap script in hello_world.html
to base.html.

21

00:02:47,040  -->  00:02:53,080
We can remove this line, because this is the part of hello_world.html.

22

00:02:53,800  -->  00:03:00,500
Now let’s add block script here. Later this
block script will be replaced by unique script

23

00:03:00,500  -->  00:03:02,760
in each html file.

24

00:03:07,000  -->  00:03:15,320
Now let’s edit hello_world.html, here we
don’t need to write full html script anymore,

25

00:03:15,520  -->  00:03:24,820
why? Because the complete html script already
in base.html, so we just need to extends from that file.

26

00:03:36,900  -->  00:03:40,060
Here we can put block content,

27

00:03:43,160  -->  00:03:46,680
don’t forget
to always put endblock in the end.

28

00:03:46,920  -->  00:03:54,480
Inside this block content, we can put whatever we
want. Here I will put Hello World

29

00:04:01,540  -->  00:04:07,300
and the variable from our context, which is name and
age.

30

00:04:14,860  -->  00:04:27,800
Let’s go to browser, go to app1/hello_world.
And here we can see that we still have a navbar,

31

00:04:27,960  -->  00:04:37,460
and we also get Hello World and Ahmad - 21
But if we try to access b, we still don’t

32

00:04:37,460  -->  00:04:44,300
have a navbar, and also if we try to access
a, we also don’t have a navbar yet.

33

00:04:44,780  -->  00:04:50,400
Now let’s try to edit a.hml & b.html.

34

00:04:55,460  -->  00:05:01,900
Let’s remove all of the script, and copy
paste from hello_world.html.

35

00:05:04,540  -->  00:05:07,640
Let’s change this to This is A,

36

00:05:10,420  -->  00:05:12,240
and remove this one.

37

00:05:14,840  -->  00:05:17,460
Let’s copy this script for B.

38

00:05:21,860  -->  00:05:27,720
Let’s edit
this to B. Now let’s back to browser

39

00:05:29,580  -->  00:05:30,800
refresh

40

00:05:31,640  -->  00:05:38,900
and here, we can see that we have a navbar
in a. Let’s try to access b.

41

00:05:39,260  -->  00:05:43,920
Here we can see that we also have a navbar in b.

42

00:05:44,300  -->  00:05:51,440
So in the future, if we want to change the
navbar, we only need to edit base.html file.

43

00:05:51,760  -->  00:05:59,020
Okay, I hope you guys understand about extends
in Django. If you have any questions,

44

00:05:59,020  -->  00:06:04,380
feel free to ask me, and I will do my best to answer
all of your questions.

45

00:06:04,460  -->  00:06:07,840
Thankyou for watching and see you on the next video.